<!--  -->
<template>
  <div class="box">
    <div class="recom">
      <div class="headers">
        <div class="lefts">
          <h3>选择展示内容 <i class="el-icon-warning-outline"></i></h3>
          <span>共有 <em>10</em> 条数据可选</span>
        </div>
        <div class="rigts">
          <el-button type="primary">添加资源</el-button>
        </div>
      </div>
      <div class="tabs">
        <el-table flex :data="tableData" style="width: 100%">
          <el-table-column label="项目名称" width="400">
            <template slot-scope="scope">
                <i class="el-icon-s-fold" style=" margin:0 20px"></i>
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
                style="width: 42px; height: 42px; display: inline-block"
              />
              <span
                style="margin-left: 42px; dispaly: block; text-align: left; line-height: 42px"
                >{{ scope.row.date }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="name" label="园区类型" width="200">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="更新时间" width="400"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footsts">
      <el-button type="primary">预览</el-button>
      <el-button type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
  created() {},
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 1000px;
  .recom {
    width: 100%;
    height: 760px;
    .headers {
       margin-top: 25px;
      width: 100%;
      height: 45px;
      display: flex;
      justify-content: space-between;
       .lefts{
        h3{
          margin: 0 0 7px 0;
        }
        span{
          em{
            color: #1E75FF;
          }
        }
       }
    }
    .tabs {
      margin-top: 10px;
      width: 100%;
      height: auto;
      border: 1px solid #e2e2e2;
    }
  }
  .footsts {
    display: flex;
    justify-content: center;
  }
}
</style>
